<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Web 全屏模式 将手机顶部的状态栏隐藏 -->
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <!-- 手机状态栏颜色 -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <!-- 忽略页面中的数字识别为电话号码 -->
    <meta name="format-detection" content="telephone=no"/>
    <!-- 添加视口 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="UTF-8">
    <title>图书详情页</title>
    <link rel="stylesheet" href="style/details.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- 头部 -->
<header class="header">
    <div class="left">
        <a href="#"><img src="images/logo.png" alt=""></a>
    </div>
    <div class="center">
        <p >豆瓣App</p >
        <p>记录你的书影音生活</p>
    </div>
    <div class="right">
        <a href="#">打开App</a>
    </div>
</header>

<!-- 详情主页 -->
<div class="main scope">
    <!-- 介绍 -->
    <div class="book-main">
        <div class="details">
            <div class="book-img">
                <img :src="imgSrc" alt="">
            </div>
            <div class="title">
                <h2>{{name}}</h2>
                <a class="ranking" href="#">
                    <span>No.{{ranking}}</span>
                    <span>{{label}}</span>
                </a>
                <p>{{author}} | {{press}} / {{time}}出版</p>
                <div class="idea">
                    <a href="#">
                        <i class="icon"></i>
                        想读
                    </a>
                    <a href="#">
                        <i class="icon ing"></i>
                        在读
                    </a>
                    <a href="#">
                        <i class="icon done"></i>
                        读过
                    </a>
                </div>
            </div>
        </div>
        <div class="score">
            <div class="trademark">
                <span>豆瓣评分 <em>TM</em></span>
                <a href="#">
                    <i class="icon grey-pen"></i>
                    我要评分
                </a>
            </div>
            <div class="rating">
                <div class="score-num">8.3</div>
                <div class="star-display">
                    <span class="stars">
                        <span class="star-full"></span>
                        <span class="star-full"></span>
                        <span class="star-full"></span>
                        <span class="star-full"></span>
                        <span class="star-half"></span>
                    </span>
                    <p>{{number}}人评分</p>
                </div>
            </div>
            <div class="chart">
                <div class="star-stats" v-for="(stat,sindex) in stats" :key="sindex">
                    <div class="stars-wrap">
                        <span class="star-white" v-for="sp in stat.length"></span>
                    </div>
                    <div class="chart-wrap">
                        <span :style="{width:stat.charts}"></span>
                    </div>
                </div>
            </div>
        </div>
        <div class="trial">
            <span>试读 / 购买</span>
            <a href="#">打开App查看></a>
        </div>
    </div>
    <!-- 简介 -->
    <div class="book-brief">
        <div class="brief-title">简介</div>
        <p class="comment-text brief-cont">◎ 编辑推荐★ 一本极具名著气质的原创小说，独特的语言质感、异国的文化背景，造就了这本超越国界的小说，充分显示“新海外汉语写作”的多种可能性。★ 在这个...
            <a href="#" class="open">展开</a>
        </p>
    </div>

    <!-- 分割线 -->
    <div class="split"></div>

    <!-- 短评 -->
    <div class="evaluates short">
        <div class="ev-header">
            <span class="ev-title">短评</span>
            <a class="ev-write" href="#"><i class="icon icon-write"></i>写短评</a>
        </div>
        <div class="comment-list">
            <ul>
                <li v-for="(short, index) in shorts" :key="index">
                    <div class="desc">
                        <a href="#"><img :src="short.imgSrc" alt=""></a>
                        <div class="user-info">
                            <div>{{short.name}}</div>
                            <span class="stars">
                                <span class="star-full"></span>
                                <span class="star-full"></span>
                                <span class="star-full"></span>
                                <span class="star-full"></span>
                                <span class="star-full"></span>
                            </span>
                            <span class="date">{{short.time}}个月前</span>
                        </div>
                    </div>
                    <div class="comment-content">
                        <p class="comment-text">{{short.words}}... <a
                                href="#" class="open">展开</a></p>
                    </div>
                    <div class="btn-info">
                        <div class="btn-like">
                            <i class="icon icon-like"></i>
                            <span>{{short.likes}}</span>
                        </div>
                        <div class="btn-more">
                            <i class="icon icon-more"></i>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="ora-wrap">
            <a href="#">打开App，看更多热门短评</a>
        </div>
    </div>

    <!-- 分割线 -->
    <div class="split"></div>

    <!-- 讨论-->
    <div class="evaluates discuss">
        <div class="ev-header">
            <span class="ev-title">讨论</span>
        </div>
        <div class="comment-list litter">
            <ul>
                <li v-for="(dis,index) in discuss" :key="index">
                    <a href="#">
                        <p class="question">{{dis.problem}}</p>
                        <span class="reply">{{dis.per}}回复</span>
                    </a>
                </li>
            </ul>
        </div>
        <div class="ora-wrap">
            <a href="#">打开App，看全部讨论</a>
        </div>
    </div>

    <!-- 分割线 -->
    <div class="split"></div>

    <!-- 读书笔记-->
    <div class="evaluates note">
        <div class="ev-header">
            <span class="ev-title">读书笔记</span>
        </div>
        <div class="comment-list litter">
            <ul>
                <li v-for="(note, index) in notes" :key="index">
                    <div class="desc">
                        <a href="#"><img :src="note.imgSrc" alt=""></a>
                        <div class="user-info">
                            <div>{{note.name}}</div>
                        </div>
                    </div>
                    <div class="comment-content">
                        <p class="comment-text">{{note.words}}</p>
                    </div>
                </li>
            </ul>
        </div>
        <div class="ora-wrap">
            <a href="#">打开App，看更多读书笔记</a>
        </div>
    </div>

    <!-- 分割线 -->
    <div class="split"></div>

    <!-- 喜欢这本书的人也喜欢 -->
    <div class="books-rec">
        <div class="rec-title">
            <span>喜欢这本书的人也喜欢</span>
            <a href="#">打开App查看更多></a>
        </div>
        <div class="rec-list">
            <ul>
                <li v-for="(book, index) in more" :key="index">
                    <div><img :src="book.imgSrc" alt=""></div>
                    <span>{{book.name}}</span>
                </li>
            </ul>
        </div>
    </div>

    <!-- 分割线 -->
    <div class="split"></div>

    <!-- 书评 -->
    <div class="evaluates review">
        <div class="ev-header">
            <span class="ev-title">书评</span>
            <a class="ev-write" href="#"><i class="icon icon-write"></i>写书评</a>
        </div>
        <div class="comment-list litter">
            <ul>
                <li v-for="(review, index) in bookReview" :key="index">
                    <div class="desc">
                        <a href="#"><img :src="review.imgSrc" alt=""></a>
                        <div class="user-info">
                            <div>{{review.name}}</div>
                            <span class="stars">
                                <span class="star-full"></span>
                                <span class="star-full"></span>
                                <span class="star-full"></span>
                                <span class="star-full"></span>
                                <span class="star-full"></span>
                            </span>
                        </div>
                    </div>
                    <div class="comment-content">
                        <div class="comment-title">{{review.title}}</div>
                        <p class="comment-text">{{review.words}}</p>
                    </div>
                    <div class="comment-info">{{review.res}}回复 · {{review.nice}} 有用</div>
                </li>
            </ul>
        </div>
        <div class="ora-wrap">
            <a href="#">打开App，看更多全部书评</a>
        </div>
    </div>
</div>

<script src="js/details.js"></script>
</body>
</html>